<template>
  <div class="container w-full h-full">
    <!-- 图片预览 -->
    <div class="wrapper view-wrapper">
      <img ref="previewing" :src="bg" alt="" />
    </div>

    <!-- 图片裁剪 -->
    <div class="wrapper cut-wrapper">
      <img ref="cropping" :src="bg" alt="">
    </div>

    <!-- 预览窗口 -->
    <div class="flex">
      <div class="preview"></div>
      <div id="preview"></div>
    </div>

    <el-button type="primary" @click="getCutFile">获取头像</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// import 'cropperjs/dist/cropper.css';
import Cropperjs from 'cropperjs'
import bg from '@/assets/img/bg.png'

// 初始化图片预览
let previewing = ref()
let preview
const initCropperPreview = () => {
  const options = {
    preview: '.preview', // 预览
    viewMode: 3,
    aspectRatio: 1, // 裁切窗口的比例，1宽高同等
    dragMode: 'none', // 拖动行为的规范，move拖动图像，默认值crop拖曳裁剪区域，none既不能移动也不能裁剪
    autoCrop: false, // 是否在初始化时进入裁剪，显示裁剪框
    background: false, // 是否显示裁剪区域的透明网格
  }
  preview = new Cropperjs(previewing.value, options) //实例化cropper对象
}

// 初始化图片编辑
let cropping = ref()
let cropper
const initCropperCropping = () => {
  const options = {
    aspectRatio: 1, // 裁切窗口的比例
    preview: '#preview', // 预览裁切窗口图片
    viewMode: 1, // 控制裁剪框与画布间的交互方式，0不限制裁剪框位置，1裁剪框不能超出图像边界，2裁剪框不能超出画布，3保持宽高比并限制在画布内
    minContainerWidth: 200, // 裁剪器容器的最小宽度
    minContainerheight: 200, // 裁剪器容器的最小高度
    minCropBoxWidth: 200, // 裁剪框的最小宽度
    minCropBoxHeight: 200, // 裁剪框的最小高度
    minCanvasWidth: 200, // 裁剪器容器画布的最小宽度
    minCanvasHeight: 200, // 裁剪器容器画布的最小高度

    crop(event) {
      console.log(event.detail.x) // 裁剪框左上角相对于画布（原始图像）左边的距离
      console.log(event.detail.y) // 裁剪框左上角相对于画布顶部的距离
      console.log(event.detail.width) // 裁剪框的宽度
      console.log(event.detail.height) // 裁剪框的高度
      console.log(event.detail.rotate) // 图像旋转的角度。如果未旋转，则该值为0
      console.log(event.detail.scaleX) // 图像在X轴的缩放比例
      console.log(event.detail.scaleY) // 图像在Y轴的缩放比例
    },
  }
  cropper = new Cropperjs(cropping.value, options) //实例化cropper对象
}

// 获取裁剪图像信息
const getCutFile = () => {
  cropper.getCroppedCanvas({ mageSmoothingQuality: 'high' }).toBlob((blob) => {
    const file = new File([blob], 'cut.png')
    console.log(file, '图像信息')
  })
}

onMounted(() => {
  initCropperPreview()
  initCropperCropping()
})
</script>

<style lang="scss" scoped>
.container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .preview {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px #333 dashed;
  }

  #preview {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px #333 dashed;
  }
}

.wrapper {
  width: 600px;
  height: 300px;
  // display: flex;
  // justify-content: center;

  .img {
    display: block;
    max-width: 100%;
  }
}

.view-wrapper {}

.cut-wrapper {}
</style>
